<template>
  <view class="login-container">
    <!-- 顶部背景区域 -->
    <view class="header-bg animate-fade-in">
      <view class="logo-content flex align-center justify-center">
        <view class="logo-wrapper animate-scale-in">
          <image class="logo-image" src="/static/images/login-logo.png" mode="widthFix"></image>
        </view>
      </view>
    </view>
    
    <!-- 登录表单区域 -->
    <view class="form-container animate-slide-up">
      <view class="welcome-text">欢迎登录</view>
      <view class="subtitle-text">邦修通销售系统</view>
      
      <view class="input-item flex align-center animate-fade-in" style="animation-delay: 0.1s;">
        <view class="iconfont icon-user icon"></view>
        <input v-model="loginForm.username" class="input" type="text" placeholder="请输入手机号/账号" maxlength="30"/>
      </view>
      
      <view class="input-item flex align-center animate-fade-in" style="animation-delay: 0.2s;">
        <view class="iconfont icon-password icon"></view>
        <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20"/>
      </view>
      
      <view class="flex align-center captcha-container animate-fade-in" v-if="captchaEnabled" style="animation-delay: 0.3s;">
        <view class="input-item flex align-center captcha-input">
          <view class="iconfont icon-code icon"></view>
          <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4"/>
        </view>
        <view class="login-code">
          <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
        </view>
      </view>
      
      <view class="action-btn animate-fade-in" style="animation-delay: 0.4s;">
        <button @click="handleLogin" class="login-btn">登录</button>
        <button @click="navigateToRegistry" class="register-btn">去注册</button>
      </view>
    </view>

    <!-- 页面底部 -->
    <view class="xieyi text-center animate-fade-in" style="animation-delay: 0.5s;">
      <text class="agreement-text">登录即代表同意</text>
      <text @click="handleUserAgrement" class="agreement-link">《用户协议》</text>
      <text @click="handlePrivacy" class="agreement-link">《隐私协议》</text>
    </view>
  </view>
</template>

<script setup>
import modal from '@/plugins/modal'
import {getCodeImg} from '@/api/login'
import {getCurrentInstance, ref} from "vue";
import config from '@/config.js'
import useUserStore from '@/store/modules/user'

const {
  proxy
} = getCurrentInstance()

const codeUrl = ref("");
const captchaEnabled = ref(true);
const tenantEnabled = ref(true);
const globalConfig = ref(config);
const loginForm = ref({
  tenantId: '000000',
  username: "",
  password: "",
  code: "",
  uuid: ''
});

// 租户列表
const tenantList = ref({});

// 获取图形验证码
function getCode() {
  getCodeImg().then(res => {
    const {
      data
    } = res;
    captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled;
    //  captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
    if (captchaEnabled.value) {
      codeUrl.value = 'data:image/gif;base64,' + data.img
      loginForm.value.uuid = data.uuid
    }
  })
};

async function handleLogin() {
  if (loginForm.value.username === "") {
    modal.msgError("请输入您的账号")
  } else if (loginForm.value.password === "") {
    modal.msgError("请输入您的密码")
  } else if (loginForm.value.code === "" && captchaEnabled.value) {
    modal.msgError("请输入验证码")
  } else {
    pwdLogin()
  }
};

function navigateToRegistry() {
  uni.navigateTo({
    url: '/pages/registry'
  });
}

// 密码登录
async function pwdLogin() {
  modal.loading("登录中")
  useUserStore().login(loginForm.value).then(() => {
    loginSuccess()
  }).catch((err) => {
    modal.alert(err);
    getCode()
  }).finally(() => modal.closeLoading())
};

function loginSuccess(result) {
  // 设置用户信息
  useUserStore().getInfo().then(res => {
    uni.reLaunch({
      url: '/pages/index'
    });
  })
}

// 隐私协议
function handlePrivacy() {
  let site = globalConfig.value.appInfo.agreements[0];
  uni.navigateTo({
    url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
  });
};

// 用户协议
function handleUserAgrement() {
  let site = globalConfig.value.appInfo.agreements[1]
  uni.navigateTo({
    url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
  });
};

getCode();
</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
}

.login-container {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  
  /* 添加底部装饰效果 */
  &::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20vh;
    background: linear-gradient(to top, rgba(232, 77, 28, 0.03), transparent);
    z-index: 0;
    pointer-events: none;
  }
}

.header-bg {
  background: linear-gradient(180deg, #e84d1c 0%, #f06e44 100%);
  height: 350rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  position: relative;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
}

.logo-content {
  padding-top: 80rpx;
  
  .logo-wrapper {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 15rpx;
    border-radius: 25rpx;
    box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    position: relative;
    
    /* 创建一个伪元素，用于显示logo的背景，但带有渐变和圆角 */
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      /* 使用渐变色作为背景，让中央更亮，边缘更融合 */
      background: radial-gradient(
        circle at center, 
        rgba(255, 255, 255, 0.95) 60%, 
        rgba(255, 255, 255, 0.85) 100%
      );
      border-radius: 20rpx;
      z-index: 0;
    }
    
    /* 增加边角装饰性元素，增强品牌形象 */
    &::after {
      content: '';
      position: absolute;
      top: 5rpx;
      right: 5rpx;
      width: 25rpx;
      height: 25rpx;
      border-top: 2px solid rgba(232, 77, 28, 0.3);
      border-right: 2px solid rgba(232, 77, 28, 0.3);
      border-top-right-radius: 8rpx;
      z-index: 2;
    }
  }
  
  .logo-image {
    width: 300rpx;
    position: relative;
    z-index: 1;
    /* 使用CSS混合模式，让白色背景与底层颜色融合 */
    mix-blend-mode: multiply;
    /* 结合阴影、对比度和亮度的滤镜效果 */
    filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.05)) contrast(1.05) brightness(1.02);
  }
}

.form-container {
  margin: -60rpx 40rpx 0;
  padding: 50rpx 40rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
  
  /* 添加微妙的装饰效果 */
  &::before {
    content: '';
    position: absolute;
    top: -3rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 100rpx;
    height: 6rpx;
    background: linear-gradient(to right, #e84d1c, #f06e44);
    border-radius: 6rpx;
  }
}

.welcome-text {
  font-size: 48rpx;
  font-weight: bold;
  background: linear-gradient(to right, #333333, #555555);
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 10rpx;
  text-align: center;
}

.subtitle-text {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 50rpx;
  text-align: center;
  position: relative;
  
  /* 添加微妙的底部分隔线 */
  &::after {
    content: '';
    position: absolute;
    bottom: -25rpx;
    left: 25%;
    right: 25%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.05), transparent);
  }
}

.input-item {
  background-color: #f7fafc;
  border-radius: 40rpx;
  height: 90rpx;
  margin-bottom: 30rpx;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
  border: 1px solid transparent;
  
  &:focus-within {
    border-color: rgba(232, 77, 28, 0.3);
    box-shadow: 0 0 0 3rpx rgba(232, 77, 28, 0.1);
    transform: translateY(-2rpx);
  }
  
  .icon {
    font-size: 38rpx;
    margin-left: 30rpx;
    color: #a0aec0;
    transition: color 0.3s ease;
  }
  
  &:focus-within .icon {
    color: #e84d1c;
  }
  
  .input {
    width: 100%;
    font-size: 30rpx;
    line-height: 90rpx;
    text-align: left;
    padding-left: 20rpx;
    color: #2d3748;
  }
}

.captcha-container {
  margin-bottom: 30rpx;
}

.captcha-input {
  flex: 1;
  margin-right: 20rpx;
  margin-bottom: 0;
}

.login-code {
  height: 90rpx;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
  }
  
  .login-code-img {
    height: 90rpx;
    width: 200rpx;
    border-radius: 12rpx;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
  }
}

.action-btn {
  margin-top: 60rpx;
  
  .login-btn, .register-btn {
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 45rpx;
    font-size: 32rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    letter-spacing: 4rpx;
    position: relative;
    overflow: hidden;
    
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
      transform: translateX(-100%);
      transition: transform 0.6s ease;
    }
    
    &:active::after {
      transform: translateX(100%);
    }
  }
  
  .login-btn {
    background: linear-gradient(to right, #e84d1c, #f06e44);
    color: #ffffff;
    
    &:active {
      background: linear-gradient(to right, #d43e10, #e05a30);
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    }
  }
  
  .register-btn {
    background-color: #f7fafc;
    color: #4a5568;
    border: 1px solid #e2e8f0;
    
    &:active {
      background-color: #edf2f7;
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
    }
  }
}

.xieyi {
  margin-top: 60rpx;
  font-size: 24rpx;
  
  .agreement-text {
    color: #718096;
  }
  
  .agreement-link {
    color: #e84d1c;
    margin-left: 8rpx;
    position: relative;
    padding-bottom: 4rpx;
    
    /* 添加下划线动画效果 */
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 1px;
      background-color: #e84d1c;
      transition: width 0.3s ease;
    }
    
    &:hover::after {
      width: 100%;
    }
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(40rpx);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from { 
    opacity: 0;
    transform: scale(0.9);
  }
  to { 
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.6s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.5s ease-out forwards;
}

/* 通用弹窗样式优化 - 防止样式遗漏 */
:deep(.uni-modal),
:deep(.uni-dialog),
:deep(.uni-popup) {
  min-height: auto !important;
  max-height: auto !important;
}

:deep(.uni-modal__bd),
:deep(.uni-dialog-content),
:deep(.uni-popup-dialog-content) {
  min-height: auto !important;
  padding: 20rpx 15rpx !important;
}

:deep(.uni-modal__btn),
:deep(.uni-dialog-button),
:deep(.uni-popup-dialog-button) {
  height: auto !important;
  min-height: 70rpx !important;
  max-height: 90rpx !important;
  line-height: 70rpx !important;
}
</style>